<script setup lang="ts">

</script>

<template>
  <div class="app-header">
    <div class="content wrapper">
      <div class="content-left">
        <NuxtLink to="/" class="link">
          <span>OPPO官网</span>
        </NuxtLink>
        <NuxtLink to="/onePlus" class="link">
          <span>一加官网</span>
        </NuxtLink>
      </div>
      <div class="content-right">
        <NuxtLink to="" class="link download">
          <span>下载OPPO商城App</span>
          <div class="app">
            <img class="ecode" src="@/assets/images/ecode.png" alt=""/>
            <div class="name">扫码下载OPPO商城App</div>
          </div>
        </NuxtLink>
        <NuxtLink to="/login" class="link_border link" target="_blank">
          <i class="iconfont icon-user"></i>登录
        </NuxtLink>
        <NuxtLink to="/register" class="link_border link" target="_blank">
          注册
        </NuxtLink>
        <NuxtLink to="/cart" class="link"
        ><i class="iconfont icon-shoppingcart"></i>购物车
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-header {
  height: 40px;
  display: flex;
  align-items: center;
  background-color: black;
  color: $bgGrayColor;
  font-size: $fontSize12;
}

.content {
  display: flex;
}

.content-left {
  width: 750px;
}

.content-right {
  margin-left: 118px;
}

.link {
  display: inline-block;
  margin-right: 10px;
  color: $bgGrayColor;
  font-size: $fontSize12;
  line-height: 14px;
  padding: 0 14px;
  // 字体变暗
  //opacity: 0.8;
  // 去掉默认样式
  text-decoration: none;
}

.link_border {
  border-right: 1px solid #fff;
}

.iconfont {
  margin-right: 6px;
}

.icon-user {
  font-size: 12px;
  opacity: 1;
}

.icon-shoppingcart {
  font-size: 12px;
  opacity: 1;
}

.download {
  //局部的相对定位使用 子绝父相
  position: relative;

  .app {
    display: none;
    position: absolute;
    top: 25px;
    left: 0;
    padding: 8px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
    z-index: 10000;

    .ecode {
      width: 140px;
      height: 140px;
    }

    .name {
      color: #000;
      margin-top: 2px;
    }
  }
}

.download:hover .app {
  //悬浮二维码使用 hover伪类
  display: block;
}
</style>
